import React, { Component } from 'react'
import Axios from 'axios';
import { Link } from 'react-router-dom'
import TabBar from '../common/TabBar'
import Header from '../common/Header'

export default class Home extends Component {
    constructor() {
        super();
        this.state = {
            shoplist:[]
        }
    }
    componentDidMount() {
        Axios.get('/shoplist').then((res) => {
            this.setState({
                shoplist: res.data.list
            })
        })
    }
    render() {
        return (
            <div className="home-page">
                {/* Header组件 */}
                <Header title="首页"></Header>
                {/* 轮播图 */}


                {/* 店铺列表 */}
                <div className="title">猜你喜欢</div>
                <div className="shoplist">
                    {
                        this.state.shoplist.map((item) => {
                            return (
                                <Link key={item.id} className="item" to={{ pathname:'/shop',state:item }}>
                                    <div className="pic">
                                        <img src={item.pic} alt=""/>
                                    </div>
                                    <div className="text">
                                        <div className="name">{item.name}</div>
                                        <div>月售 {item.buyCount} 笔</div>
                                        <div>距离 {item.distance}km</div>
                                    </div>
                                </Link>
                            )
                        })
                    }
                </div>
                    
                {/* tabbar组件 */}
                <TabBar></TabBar>
            </div>
        )
    }
}
